<template>
    <view class="page">
        <u-sticky>
            <view class="header_box">
                <hedsty :mbot="32" :headCentext="blindBoxData.name"></hedsty>
            </view>
        </u-sticky>
        <view class="top_content_box">
            <!-- <view class="image_box">
                <image  :src="blindBoxData.image"  mode="heightFix" />
            </view> -->
            <swiper class="swiper" circular :current="currentIndex" :indicator-dots="false" :autoplay="false"
                @change="handleSwiperChange">
                <swiper-item v-for="(item, index) in blindBoxData.blind_box_prize" :key="index">
                    <view class="swiper-item">
                        <image :src="item.image" mode="widthFix" />
                    </view>
                </swiper-item>
            </swiper>
            <view class="left_box" @click="lastBtn">
                <image src="https://morgan.dingxians.cn/static/uniPic/left.png" mode="scaleToFill" />
            </view>
            <view class="right_box" @click="nextBtn">
                <image src="https://morgan.dingxians.cn/static/uniPic/right.png" mode="scaleToFill" />
            </view>

            <view class="cebianniu_box1" @click="getDetail()">
                <image src="https://morgan.dingxians.cn/static/yfs/shauxin.png" mode="scaleToFill" />
            </view>
            <view class="cebianniu_box2" @click="gotoin">
                <image src="https://morgan.dingxians.cn/static/yfs/shangdai.png" mode="scaleToFill" />
            </view>
            <view class="cebianniu_box3" :class="tabsId != 4 ? 'cebianniu_box3s' :''" @click="recordDraw">
                <image src="https://morgan.dingxians.cn/static/yfs/jilu.png" mode="scaleToFill" />
            </view>
            <view class="cebianniu_box4" @click="rulePup">
                <image src="https://morgan.dingxians.cn/static/yfs/guize.png" mode="scaleToFill" />
            </view>
            <button class="cebianniu_box5" @click="onShare" open-type="share">
                <image src="https://morgan.dingxians.cn/static/yfs/fenxiang.png" mode="scaleToFill" />
            </button>

        </view>
        <view class="jindutiao_box" v-if="tabsId == 4">
            <view class="top_box">
                <view class="wenzi_bx">
                    <view class="lianjishangwenzi_box">连击赏</view>
                    <view class="lianjishangwenzi_box">{{ blindBoxData.num }}/{{ blindBoxData.continuously_play_num }}
                    </view>
                </view>
                <view class="jinjie_jindu_box">
                    <u-line-progress :percentage="percentage" :showText="true" inactiveColor="rgba(255, 255, 255, 0.78)"
                        activeColor="rgba(255, 68, 68, 1)"></u-line-progress>
                </view>
            </view>
            <view class="guize_box" @click="rulePup"
                style="background-image: url('https://morgan.dingxians.cn/static/avtivey/5.png');">
                规则</view>
            <view class="lingqu_box"
                :style="{ backgroundImage: 'url(' + 'https://morgan.dingxians.cn/static/avtivey/' + (percentage >= 100 ? '5' : '2') + '.png)' }"
                @click="$no(ljqBtn)">
                领取</view>
        </view>
        <view class="content_box" v-for="(item, index) in probability" :key="index" v-if="Number(item.pro) > 0">
            <view class="contop_box"
                :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/uniPic/' + item.level_id + '.png)' }">
                <view class="vent_text_box" :class="'vent_text_box_' + item.level_id">概率：{{ (item.pro * 1).toFixed(3)
                    }}%</view>
            </view>
            <view class="content_neirong_box">
                <view class="dange_neirong_box" v-if="item.level_id == items.level_id" @click="spDetail(items)"
                    v-for="(items, indexs) in blindBoxData.blind_box_prize" :key="indexs"
                    :style="{ backgroundImage: 'url(https://morgan.dingxians.cn/static/xin/' + item.level_id + '.png)' }">
                    <view class="dange_hezi_box">
                        <image :src="items.image" mode="heightFix" />
                    </view>
                    <view class="dange_con_name_box">{{ items.title }}</view>
                    <view class="dange_con_name_box">{{ Number(items.probability).toFixed(3) }}%</view>
                    <view class="dange_con_price_box" :class="'dange_con_price_box_' + item.level_id">{{
                        blindBoxData.price
                    }}元素
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 240rpx;"></view>
        <view class="choujiang_box">
            <view class="dange_choujiang_box" v-for="(item, index) in drawOpen" :key="index" @click="openDraw(item)"
                style="background-image: url('https://morgan.dingxians.cn/static/yfs/opens.png');">
                <view class="top_jichou_box">{{ item.val }}抽</view>
                <view class="top_price_box">{{ (Number(item.val) * Number(blindBoxData.price)).toFixed(2) }}元素
                </view>
            </view>
        </view>
        <drawzf :payShow="payShow" @closePopup="closePopup" :challenge_box_data="blindBoxData" :burst="burst"
            :balance="balance" :point="point" :pay_price="pay_price" :si_dPay="si_dPay" @payType="payType"
            :payId="payId" @agreeBtn="agreeBtn" :agreeSta="agreeSta" @goumai="$no(goumai)" @conClick="conClick">
        </drawzf>
        <rule :rulecontent="rulecontent" :ruleShow="ruleShow" @handlePopup="closePopup"></rule>
        <!-- <blrward :recordShow="recordShow" @handlePopup="closePopup" :rewardList="WinnerList" :simgleList="simgleList"
            :signId="signId" @signClick="signClick"></blrward> -->
        <spdetail :ruleShow="detailShow" @handlePopup="handle1Popup" :spDetailObj="spDetailObj"
            :jiaprice="blindBoxData.price"></spdetail>

        <u-popup :show="recordShow" mode="bottom" overlayOpacity=".9" bgColor="transparent">
            <view class="tanchuang_box" style="background-image: url('https://morgan.dingxians.cn/static/btm1.png');"
                @touchmove.stop.prevent="prevent">
                <view class="title_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/recordDrwa/2.png');"></view>
                <view class="close_guanbi_box" @click="closePopup"
                    style="background-image: url('https://morgan.dingxians.cn/static/recordDrwa/3.png');"></view>
                <view class="jilu_sta_box">
                    <view class="rule_box"
                        :style="{ backgroundImage: 'url(' + (item.id == signId ? item.sel_img : item.img) + ')' }"
                        v-for="(item, index) in simgleList" :key="index" @click="signClick(item)">
                        {{ item.name }}
                    </view>
                </view>
                <z-paging ref="paging" :fixed="false" v-model="rewardList" @query="queryList">
                    <!-- <view class="haudongquyu_nox"> -->
                    <view class="dabing_dangess_nox" v-for="(item, index) in rewardList" :key="index">
                        <view class="dange_boxjilu">
                            <view class="touxiang_box">
                                <image :src="item.avatar" mode="scaleToFill" />
                                <view class="touxiangkuang_box" v-if="item.level_id > 0">
                                    <image
                                        :src="'https://morgan.dingxians.cn/static/txk/' + (item.level_id >= 1 && item.level_id <= 4 ? '1_4' : item.level_id >= 5 && item.level_id <= 8 ? '5_8' : item.level_id >= 9 && item.level_id <= 12 ? '9_12' : item.level_id >= 13 && item.level_id <= 16 ? '13_16' : '17_20') + '.png'"
                                        mode="widthFix" />
                                </view>
                            </view>
                            <view class="name_shaop_box">
                                <view class="t_1_box">
                                    <view class="left_name_box">{{ item.nickname }}</view>
                                    <view class="rt_level_name_box">
                                        <image
                                            :src="'https://morgan.dingxians.cn/static/user_levelid/' + item.level_id + '.png'"
                                            mode="heightFix" />
                                    </view>
                                    <view class="jg_num">第{{ item.id }}发</view>
                                </view>
                                <view class="b_2_box">{{ item.created_at }}</view>
                            </view>
                            <view class="right_boxss">
                                <view class="shop_dengjibox">{{ item.box_prize_level_name }}</view>
                                <view class="shijian_box">{{ item.box_prize_name }}</view>
                            </view>
                        </view>
                        <!-- <view class="jg_num" v-if="signId != 0">X{{ item.jg_num }}发</view> -->
                    </view>

                    <!-- </view> -->
                </z-paging>
            </view>
        </u-popup>


    </view>
</template>
<script>
import hedsty from '../components/hedsty.vue'
import drawzf from '../components/drawzf.vue'
import rule from '../components/rule.vue'
// import blrward from '../components/blrward.vue'
import spdetail from '../components/detail.vue'
export default {
    components: {
        hedsty,
        drawzf,
        rule,
        // blrward,
        spdetail
    },
    data() {
        return {
            percentage: 0,
            noClick: true, //防抖
            blindBoxData: {},
            currentIndex: 1,
            probability: [],
            drawOpen: [
                {
                    id: 1,
                    val: 1
                },
                {
                    id: 2,
                    val: 3
                },
                {
                    id: 3,
                    val: 5
                },
                {
                    id: 4,
                    val: 10
                }
            ],
            burst: 1,
            payShow: false,
            balance: '0.00',
            point: '0.00',
            si_dPay: false,
            agreeSta: true,
            // #ifndef MP-ALIPAY
            payId: 1,
            // #endif
            // #ifdef MP-ALIPAY
            payId: 3,
            // #endif
            box_pay_mode: 1,
            ruleShow: false,
            rulecontent: '',
            recordShow: false,
            rewardList: [],
            simgleList: [
                {
                    id: 0,
                    img: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png',
                    name: '全部'
                },
                {
                    id: 4,
                    img: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png',
                    name: '超神款'
                },
                {
                    id: 3,
                    img: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png',
                    name: '欧皇款'
                },
                {
                    id: 2,
                    img: 'https://morgan.dingxians.cn/static/wxs/1.png',
                    sel_img: 'https://morgan.dingxians.cn/static/wxs/5.png',
                    name: '隐藏款'
                },
            ],
            signId: 0, //当前点击的分类
            detailShow: false,
            spDetailObj: {},
            bxxqsShow: false,
            chadeNum: '',
            pay_price: '',
            tabsId: ''
        }
    },
    computed: {

    },
    onLoad(e) {
        uni.setStorageSync('open', e.open)
        this.mhId = e.id
        this.tabsId = e.tabsId
    },
    onShow() {
        this.payShow = false
        this.getDetail()
    },
    methods: {
        ljqBtn() {
            console.log("123213")
        },
        // 分享的内容
        onShare() {
            let that = this
            uni.share({
                provider: 'weixin',
                scene: "WXSceneSession",
                type: 5,
                imageUrl: that.blindBoxData.blind_box_prize[0].image,
                title: that.blindBoxData.name,
                miniProgram: {
                    id: 'gh_7cbc8087cb4f',
                    path: 'uniPage/unlDetail?id=' + that.mhId,
                    type: 0,
                    webUrl: 'https://yq.dingxians.cn'
                },
                success: ret => {
                    console.log('success', ret);
                },
                fail: err => {
                    console.log('error', err);
                }
            });
        },
        spDetail(item) {
            console.log(3123123)
            this.detailShow = true
            this.spDetailObj = item
        },
        handle1Popup() {
            this.detailShow = false
        },
        signClick(item) {
            this.signId = item.id
            this.$refs.paging.reload()
        },
        recordDraw() {
            this.recordShow = true
            this.$refs.paging.reload()
        },
        queryList(pageNo, pageSize) {
            let data = {
                type: this.signId,
                blind_box_id: this.mhId,
                page: pageNo,
                limit: pageSize,
            }
            this.$Request.get(this.$api.index.blindBoxOrderPrizesFoldWinnerRecord, data).then(res => {
                if (res.code == 200) {
                    this.$refs.paging.complete(res.data.data.data)
                }
            })
        },
        gotoin() {
            uni.switchTab({
                url: '/pages/bonus/index',
            })
        },
        rulePup() {
            this.$Request.get(this.$api.agreen.contents + `/play_rule`).then(res => {
                this.rulecontent = res.data.content
                this.ruleShow = true
            })
        },
        getDetail() {
            uni.showLoading({
                title: '加载中'
            })
            this.$Request.get(this.$api.index.blindBox + `/${this.mhId}`).then(res => {
                uni.hideLoading()
                if (res.code == 200) {
                    this.blindBoxData = res.data.data
                    this.probability = res.data.data.probability.reverse()
                    this.share.title = this.blindBoxData.name
                    this.share.parameter = '&id=' + this.mhId
                    this.share.imageUrl = this.blindBoxData.blind_box_prize[0].image
                    this.percentage = (res.data.data.lj_pro * 100)
                    // #ifdef MP-ALIPAY
                    // setTimeout(() => {
                    uni.setNavigationBarTitle({
                        title: this.blindBoxData.name

                    })
                    // }, 600);
                    // #endif
                }
            })
        },
        ljqBtn() {
            this.box_pay_mode = 1
            if (Number(this.percentage) >= 100) {
                var data = {
                    blind_box_id: this.mhId,
                    pay_mode: this.box_pay_mode,
                    multiple: 1,
                    coupon_id: '',
                    point_price: this.point
                }
                this.$Request.post(this.$api.index.blindBoxDraws, data).then(res => {
                    if (res.code == 200) {
                        if (res.data.status == 1) {
                            this.$router(`/uniPage/drawresu?box_order_id=${res.data.box_order_id}&box_id=${this.mhId}&pay_mode=${this.box_pay_mode}&tabsId=${this.tabsId}`)
                        }
                    }
                })
            } else {
                this.$msg('条件未达到！')
            }
        },
        lastBtn() {
            this.currentIndex = (this.currentIndex - 1 + this.blindBoxData.blind_box_prize.length) % this.blindBoxData.blind_box_prize.length
        },
        nextBtn() {
            this.currentIndex = (this.currentIndex + 1) % this.blindBoxData.blind_box_prize.length
        },
        handleSwiperChange(event) {
            const current = event.detail.current
            this.currentIndex = current
        },
        openDraw(item) {
            this.burst = item.val
            this.box_pay_mode = item.id
            this.mPayment()
        },


        mPayment() {
            var data = {
                cat_id: 1,
                blind_box_id: this.mhId,
                pay_mode: this.box_pay_mode,
                multiple: 1,
                coupon_id: '',
            }
            this.$Request.post(this.$api.index.blindBoxPriceSpread, data).then(res => {
                if (res.code == 401) {
                    this.balance = res.data.deduction_balance
                    this.point = res.data.deduction_point
                    this.pay_price = res.data.difference_amount
                    // this.chadeNum = res.data.difference_amount
                    this.si_dPay = true
                } else if (res.code == 200) {
                    this.balance = res.data.data.deduction_balance
                    this.point = res.data.data.deduction_point
                    this.pay_price = res.data.data.pay_price
                    // this.chadeNum = res.data.data.difference_amount
                    this.si_dPay = false
                }
                this.payShow = true
            })

        },
        closePopup() {
            this.payShow = false
            this.ruleShow = false
            this.recordShow = false
        },
        payType(item) {
            console.log(item)
            this.payId = item.id
        },
        agreeBtn() {
            this.agreeSta = !this.agreeSta
        },
        goumai() {
            if (this.agreeSta) {
                if (this.si_dPay) {
                    console.log('跳转支付')
                    this.payMentapily()
                } else {
                    this.payBanalce()
                }
            } else {
                this.$msg('请先同意协议')
            }

        },
        // 微信或支付宝支付
        payMentapily() {
            let data = {
                type: this.payId,
                id: 0,
                amount: this.pay_price,
                // #ifdef MP-WEIXIN
                market: 'wx',
                // #endif
                // #ifdef APP-PLUS
                market: '',
                // #endif
            }
            console.log(data, data)
            this.$Request.post(this.$api.user.rechargeOrders, data).then(res => {
                console.log(res)
                var pay_data = res.data.data

                if (this.payId == 1) {
                    // #ifdef MP-WEIXIN
                    uni.requestPayment({
                        provider: 'wxpay',
                        timeStamp: pay_data.timeStamp.toString(),
                        nonceStr: pay_data.nonceStr,
                        signType: 'MD5',
                        package: pay_data.package,
                        paySign: pay_data.paySign,
                        success: (res) => {
                            this.$msg('支付成功')
                            setTimeout(() => {
                                this.payBanalce()
                            }, 500)
                        },
                        fail: (err) => {
                            console.log(err)
                        },
                    })
                    // #endif
                    // #ifdef APP-PLUS
                    uni.requestPayment({
                        provider: 'wxpay',
                        orderInfo: pay_data,
                        success: (res) => {
                            this.$msg('支付成功')
                            setTimeout(() => {
                                this.is_pushPay = false
                                this.payNum = 0
                                this.payMent()
                            }, 500)
                        },
                        fail: (error) => {
                            console.log(error)
                        },
                    })
                    // #endif
                } else {
                    uni.requestPayment({
                        provider: 'alipay',
                        orderInfo: pay_data.trade_no,
                        success: (res) => {
                            // this.$msg('支付成功')
                            setTimeout(() => {
                                this.payBanalce()
                            }, 500)
                        },
                        fail: (error) => {
                            console.log(error)
                        },
                    })
                }
            })
        },
        payBanalce() {
            var data = {
                blind_box_id: this.mhId,
                pay_mode: this.box_pay_mode,
                multiple: 1,
                coupon_id: '',
                point_price: this.point
            }
            this.$Request.post(this.$api.index.blindBoxDraw, data).then(res => {
                if (res.code == 200) {
                    if (res.data.status == 1) {
                        if (this.box_pay_mode == 4) {
                            this.$router(`/uniPage/ten?box_order_id=${res.data.box_order_id}&box_id=${this.mhId}&pay_mode=${this.box_pay_mode}`)
                        } else {
                            this.$router(`/uniPage/drawresu?box_order_id=${res.data.box_order_id}&box_id=${this.mhId}&pay_mode=${this.box_pay_mode}&tabsId=${1}`)
                        }

                    }
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
/deep/.zp-scroll-view-absolute {
    background-color: transparent !important;
    background-image: none !important;
}

/deep/.z-paging-content-full {
    height: 80% !important;
}

.page {
    width: 100vw;
    min-height: 100vh;
    background-image: url('https://morgan.dingxians.cn/static/qjbg.gif');
    background-size: 100% 100%;


    .top_content_box {
        width: 100%;
        height: 712rpx;
        position: relative;

        .swiper {
            width: 324rpx;
            height: 400rpx;
            top: 49rpx;
            left: 0;
            right: 0;
            margin: auto;
            width: 324rpx;
            height: 400rpx;
            position: absolute;
            -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

            .swiper-item {
                display: block;
                width: 324rpx;
                height: 400rpx;

                image {
                    width: 324rpx;
                }
            }
        }

        .left_box {
            position: absolute;
            width: 75rpx;
            height: 100rpx;
            left: 73rpx;
            top: 204rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .right_box {
            position: absolute;
            width: 75rpx;
            height: 100rpx;
            right: 73rpx;
            top: 204rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .cebianniu_box1 {
            width: 109rpx;
            height: 122rpx;
            position: absolute;
            right: 30rpx;
            top: 399rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .cebianniu_box2 {
            width: 109rpx;
            height: 122rpx;
            position: absolute;
            right: 30rpx;
            top: 539rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .cebianniu_box3 {
            width: 109rpx;
            height: 122rpx;
            position: absolute;
            right: 30rpx;
            top: 798rpx;
&.cebianniu_box3s{
    
    top: 700rpx;
}
            image {
                width: 100%;
                height: 100%;
            }
        }

        .cebianniu_box4 {
            width: 109rpx;
            height: 122rpx;
            position: absolute;
            left: 30rpx;
            top: 399rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .cebianniu_box5 {
            width: 109rpx;
            height: 122rpx;
            position: absolute;
            left: 30rpx;
            top: 539rpx;
            padding: 0;
            background: transparent;
            border: none;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }


}

.jindutiao_box {
    width: 696rpx;
    height: 100rpx;
    background: rgba(120, 9, 9, .5);
    margin: auto;
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 10rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .top_box {
        width: 386rpx;
        height: 100rpx;
        box-sizing: border-box;
        padding: 6rpx;

        .wenzi_bx {
            width: 100%;
            height: 30rpx;
            display: flex;
            justify-content: space-between;
            text-align: center;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 22rpx;
            color: #FFFFFF;
            line-height: 30rpx;
            margin-bottom: 20rpx;

        }

        .jinjie_jindu_box {
            width: 100%;
            height: 24rpx;
        }

    }

    .guize_box {
        width: 105rpx;
        background-size: 100% 100%;
        height: 45rpx;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 45rpx;
    }

    .lingqu_box {
        width: 105rpx;
        background-size: 100% 100%;
        height: 45rpx;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #FFFFFF;
        line-height: 45rpx;
    }
}

.content_box {
    height: 324rpx;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30rpx;
    margin-bottom: 20rpx;

    .contop_box {
        width: 365rpx;
        height: 65rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        padding-inline: 0 10rpx;
        margin-bottom: 20rpx;

        .vent_text_box {
            height: 65rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #FFEE1F;
            line-height: 65rpx;

            &.vent_text_box_1 {
                color: #C5F7FD;
            }

            &.vent_text_box_2 {
                color: #EBC5FD;
            }

            &.vent_text_box_3 {
                color: #FDC5EB;
            }

            &.vent_text_box_4 {
                color: #FFEE1F;
            }
        }
    }

    .content_neirong_box {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-left: 30rpx;
        overflow: hidden;
        overflow-x: auto;
        display: flex;
        justify-content: flex-start;

        .dange_neirong_box {
            width: 160rpx;
            height: 243rpx;
            background-size: 100% 100%;
            box-sizing: border-box;
            // padding-top: 26rpx;
            margin-right: 20rpx;
            flex-shrink: 0;

            .dange_hezi_box {
                width: 114rpx;
                height: 140rpx;
                margin: auto;
                margin-bottom: 3rpx;

                image {
                    height: 100%;
                }
            }

            .dange_con_name_box {
                width: 100%;
                height: 22rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 22rpx;
                color: #FFFFFF;
                line-height: 22rpx;
                box-sizing: border-box;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                margin-bottom: 13rpx;
            }

            .dange_con_price_box {
                width: 100%;
                height: 22rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 22rpx;
                color: #FFFFFF;
                line-height: 22rpx;
                box-sizing: border-box;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                &.dange_con_price_box_1 {
                    color: #C5F7FD;
                }

                &.dange_con_price_box_2 {
                    color: #EBC5FD;
                }

                &.dange_con_price_box_3 {
                    color: #FDC5EB;
                }

                &.dange_con_price_box_4 {
                    color: #FFEE1F;
                }
            }
        }
    }


}

.choujiang_box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 240rpx;
    display: flex;
    justify-content: space-around;

    .dange_choujiang_box {
        width: 139rpx;
        height: 160rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-top: 41rpx;

        .top_jichou_box {
            margin-bottom: 14rpx;
            width: 100%;
            height: 44rpx;
            font-family: text1;
            font-weight: bold;
            font-size: 48rpx;
            color: #FFEDD7;
            line-height: 44rpx;
            text-align: center;
        }

        .top_price_box {
            width: 100%;
            height: 23rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFEDD7;
            line-height: 23rpx;
            text-align: center;
        }
    }



}

.tanchuang_box {
    width: 750rpx;
    height: 1000rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 45rpx;
    position: relative;

    .title_box {
        width: 442rpx;
        height: 66rpx;
        background-size: 100% 100%;
        margin: auto;
        margin-bottom: 34rpx;
    }

    .close_guanbi_box {
        position: absolute;
        width: 72rpx;
        height: 72rpx;
        background-size: 100% 100%;
        top: 41rpx;
        right: 21rpx;
    }

    .jilu_sta_box {
        width: 100%;
        height: 60rpx;
        box-sizing: border-box;
        padding: 0 27rpx;
        display: flex;
        justify-content: space-between;
        margin-bottom: 31rpx;

        .rule_box {
            width: 152rpx;
            height: 60rpx;
            font-family: test1;
            background-size: 100% 100%;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 18rpx;
            font-style: italic;
            text-align: center;
            line-height: 60rpx;
        }
    }

    // .haudongquyu_nox {
    //     width: 100%;
    //     height: 780rpx;
    //     box-sizing: border-box;
    //     padding: 0 5rpx;
    //     overflow: hidden;
    //     overflow-y: auto;

    .dabing_dangess_nox {
        width: 100%;
        // height: 140rpx;
        margin-bottom: 20rpx;

        .dange_boxjilu {
            width: 740rpx;
            height: 100rpx;
            background: rgba(120, 9, 9, .5);
            margin: auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            box-sizing: border-box;
            padding: 0 20rpx;
            position: relative;

            .touxiang_box {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-right: 30rpx;
                position: relative;

                .touxiangkuang_box {
                    width: 100rpx;
                    height: 100rpx;
                    left: -13rpx;
                    top: -10rpx;
                    position: absolute;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }

            .name_shaop_box {
                height: 100rpx;

                .t_1_box {
                    display: flex;
                    justify-content: flex-start;

                    .left_name_box {
                        height: 50rpx;
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 24rpx;
                        color: #F6F4FF;
                        line-height: 50rpx;
                        margin-right: 20rpx;
                    }

                    .rt_level_name_box {
                        box-sizing: border-box;
                        padding-top: 5rpx;
                        height: 39rpx;

                        image {
                            height: 39rpx;
                        }

                    }

                    .jg_num {
                        height: 40rpx;
                        text-align: left;
                        box-sizing: border-box;
                        padding-left: 20rpx;
                        font-family: PingFang SC;
                        // font-weight: bold;
                        font-size: 24rpx;
                        color: #F6F4FF;
                        line-height: 40rpx;
                    }
                }

                .b_2_box {
                    height: 50rpx;
                    font-family: PingFang SC;
                    // font-weight: bold;
                    font-size: 22rpx;
                    color: #F6F4FF;
                    line-height: 50rpx;
                    text-align: center;
                }


            }

            .right_boxss {
                position: absolute;
                right: 30rpx;
                height: 100rpx;

                .shop_dengjibox {
                    height: 50rpx;
                    font-family: text1;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 50rpx;
                    text-align: right;
                }

                .shijian_box {
                    width: 300rpx;
                    height: 50rpx;
                    text-align: right;
                    font-family: PingFang SC;
                    // font-weight: bold;
                    font-size: 22rpx;
                    color: #F6F4FF;
                    line-height: 50rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

        }

        .jg_num {
            height: 40rpx;
            text-align: left;
            box-sizing: border-box;
            padding-left: 20rpx;
            font-family: PingFang SC;
            // font-weight: bold;
            font-size: 24rpx;
            color: #F6F4FF;
            line-height: 40rpx;
        }
    }

}

// }</style>